<template>
	<div class="content">
		<h2><i class="iconfont icon-jinbi"></i>秒杀列表</h2>
		<div class="content-wrap">
			<!--搜索分类-->
			<div class="search">
				<div class="search__list">
					<div class="search__list--title search__list--title-tip">类型</div>
					<el-select v-model="params.type" size="mini">
						<el-option label="全部" value="" ></el-option>
						<el-option label="未结束" value="1"></el-option>
						<el-option label="已结束" value="2"></el-option>
					</el-select>
				</div>
				<div class="search__list">
					<el-button type="primary" @click="loadData" size="mini">查找</el-button>
				</div>
			</div>
			<!--商品展示表格-->
			<div class="content-table" v-loading="loading" >
				<el-table :data="data" strip size="mini">
					<el-table-column label="商品名称" prop="commodity.commodity_name"></el-table-column>
					<el-table-column label="开始时间" prop="start_time">
						<template slot-scope="scope" >
							{{scope.row.start_time|formatTime}}
						</template>
					</el-table-column>
					<el-table-column label="结束时间" prop="end_time">
						<template slot-scope="scope" >
							{{scope.row.end_time|formatTime}}
						</template>
					</el-table-column>
					<el-table-column label="库存" prop="stocks" width="150">
						<template slot-scope="scope" >
							<span>总库存：{{scope.row.stocks_total}}</span>
							<br/>
							<span>剩余库存：{{scope.row.stocks}}</span>
							<br/>
							<span>真实剩余库存：{{scope.row.stocks_real}}</span>
						</template>
					</el-table-column>
					<el-table-column label="秒杀价" prop="sale_price"></el-table-column>
					<el-table-column label="秒杀点币价" prop="bi_price"></el-table-column>
					<el-table-column label="秒杀点币" prop="dian_bi"></el-table-column>
					<el-table-column label="赠送点分" prop="give_fen"></el-table-column>
					<el-table-column label="限购数量" prop="buy_limit"></el-table-column>
					<el-table-column label="快递运费" prop="post_fee"></el-table-column>
					<el-table-column label="同城运费" prop="city_fee"></el-table-column>
					<el-table-column label="总点击量" prop="click_num"></el-table-column>
					<el-table-column label="点击用户量" prop="click_member_num"></el-table-column>
					<el-table-column label="操作" align="center" width="100">
						<template slot-scope="scope" >
							<el-button
								type="primary"
								size="mini"
								@click="showDetail(scope.row.commodity.commodity_id)">
								查看详情
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-pagination 
				@current-change="handleCurrentChange"
				background 
				layout="total, prev, pager, next, jumper"
				:total="totalNum" 
				class="fr"
				>
			</el-pagination>
			<s-model :id="commodity_id" :isShow="showModel" @closeModel="showModel=false"></s-model>
		</div>
	</div>
</template>

<script>
	import model from "./../auditing/apply_goods/children/goods_detail.vue"
	export default {
		created() {
			this.loadData();
		},
		components: {
			"s-model": model
		},
		data() {
			return {
				params: {
					type: "",
					page: 1,
					rows: 10
				},
				data: null,			
				loading: true,
				totalNum: 0,
				showModel: false,
				commodity_id: null
			}
		},
		methods: {
			handleCurrentChange(pages) {
				this.params.page = pages;
				this.loadData();
			},
			loadData() {
				this.loading = true;
				var url = `${this.url}/commodity/seckill_get_list.action`;
				var params = this.params;
				this.$http.get(url,{ params }).then((res)=> {
					this.totalNum = res.data.result.total;
					this.loading = false;
					this.data = res.data.result.rows;
				});
			},
			showDetail(commodity_id) {
				this.commodity_id = commodity_id;
				this.showModel = true;
			}
		}
	}
</script>

<style scoped lang="scss">
.model {
	width: 800px;
	height: 500px;
	left: calc(50% - 400px);
	top: calc(50% - 250px);
}
</style>